<template>
  <div class="row-box vux-1px-b">
    <img :src="product.thumb_img" alt="" @click="$router.push('/products/' + product.id)">
    <div class="p-info">
      <div>
        <div class="p-name">
         {{product.name}}
        </div>
        <div class="p-promotion">
          <clocker :time="product.underway_flash_sale.ended_at" class="clock" v-if="type === 'flash_sale'">
            距结束 %D天 <span>%H</span> : <span>%M</span> : <span>%S</span>
          </clocker>
          <div class="promotion" v-if="type === 'team_activity'">
            <badge :text="product.underway_team_activity.needer + '人成团'"></badge>
          </div>
          <div class="promotion" v-if="type === 'full_cut'">
            <badge style="margin-right:5px;" class="full-cut" v-for="(cut, index) in product.full_cut" :key="index" :text="'满' + cut.amount + '减' + cut.price"></badge>
          </div>
          <div class="promotion" v-if="type === 'integral'">
            可使用{{product.exchange_integral}}积分抵扣{{product.exchange_integral * ratio}}元
          </div>
        </div>
      </div>
      <div class="p-action">
        <div>
          <span class="p-shop-price">￥{{price}}</span>
          <s class="p-market-price">￥{{product.original_price}}</s>
        </div>
        <div><x-button mini type="warn" @click.native="$router.push('/products/' + product.id)">立即购买</x-button></div>
      </div>
    </div>
  </div>
</template>
<script>
  import { XButton, Clocker, Badge } from 'vux'
  import { INTEGRAL_EXCHANGE_RATIO } from '@/config'
  export default {
    name: 'row',
    components: {
      XButton,
      Clocker,
      Badge
    },
    data () {
      return {
        ratio: INTEGRAL_EXCHANGE_RATIO
      }
    },
    computed: {
      price () {
        let price = this.product.price
        if (this.product.underway_flash_sale && this.type === 'flash_sale') {
          price = price - this.product.underway_flash_sale.discount
        }
        if (this.product.underway_team_activity && this.type === 'team_activity') {
          price = price - this.product.underway_team_activity.discount
        }
        if (price < 0) {
          price = 0
        }
        return price
      }
    },
    props: {
      product: {
        type: Object,
        required: true
      },
      type: {
        type: String,
        default: null
      }
    }
  }
</script>
<style scoped lang='less'>
  .row-box {
    display: flex;
    padding-right: 10px;
    padding-left: 10px;
    justify-content:space-between;
    height: 120px;
    padding-bottom: 20px;
    padding-top: 20px;
  }
  .row-box img {
    width: 120px;
    height: 120px;
    padding-right: 10px;
  }
  .row-box .p-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .row-box .p-info .p-name {
    font-size: 14px;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    padding-bottom: 5px;
    color: #151516;
  }
  .row-box .p-info .p-action {
    color: @tabbar-text-active-color;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }
  .row-box .p-info .p-action .weui-btn {
    margin-right: 0;
  }
  .row-box  .p-info .p-action .p-shop-price {
    font-size: 16px;
    font-weight: 500;
    line-height: 16px;
    height: 16px;
  }
  .row-box  .p-info .p-action .p-market-price {
    font-size: 12px;
    height: 12px;
    line-height: 12px;
    color: #9c9c9c;
  }
</style>
</style>